<template>
	<div style="height:calc(100vh - 94px);background-color:#FFFFFF;overflow-y:auto;">
		<pheader style="border-bottom: 1px solid #dcdae2; ">
			<div  slot="left">业务部门配置</div>
			<div style="float:right;position: relative;font-weight: normal;" slot="right">
				<Row>
					<Col span="4">
						<Button type="primary" size="small" @click="add()" v-if="this.$hasPerm('sysAddue')">新增</Button>
					</Col>
					<Col span="20" style="padding-left:12px">
						<Input v-model="search_param" search placeholder="请输入部门名称" style="width: auto;" @on-search="changePage($event,0)" />
					</Col>
				</Row>
				
			</div>
		</pheader>
		<template style="padding: 8px 8px 0px 8px;">
			<div style="width: 100%;background-color: white;height: calc(100vh - 152px);overflow-y: auto;padding:10px;">

				<Table border stripe :columns="columns" :data="data">
					<template slot-scope=" { row, index }" slot="managerName">
						<p>{{row.managerName}}</p>
					</template>
					<template slot-scope=" { row, index }" slot="priority">
						<p>{{row.priority}}</p>
					</template>
				</Table>

				<div style="margin: 10px;overflow: hidden">
					<div style="float: right;">
						<Page :current="page" :total="total_num" show-total show-elevator show-sizer @on-change="changePage"
						 @on-page-size-change="changePageSize"></Page>
					</div>
				</div>

				<div v-if="add_menu.show">
					<Modal @on-ok="add_ok()" @on-cancel="cancel('add_menu')" v-model="add_menu.show" :loading="loading" :title="!add_menu.isupdate?'新增系统':'编辑系统'"
					 width="600">
						<Form ref="add_menu" :model="add_menu" :rules="ruleInline" label-position="left" :label-width="120">
							<Row >
								<Col span="14" >
								<FormItem label="部门名称：" prop="depName">
									<Input v-model="add_menu.depName" :maxlength="50" />
								</FormItem>
								</Col>
							</Row >
							<Row>
								<Col span="14" >
								<FormItem label="网络接口人：" prop="users">
									<component ref="inputSearch1" :dataList="amlabelList" :checkLable="add_menu.amlabel" :is="'inputSearch'"
									  :multiple="false" @on-change="checkamlabel"></component>
								</FormItem>
								</Col>
							</Row>
							<Row >
								<Col span="23">
								<FormItem label="审批优先级：" prop="priority">
									<Input v-model="add_menu.priority" :maxlength="100" placeholder="0-100：数字越小，优先级越高" />
								</FormItem>

								</Col>
							</Row >
						</Form>
					</Modal>
				</div>

			</div>
		</template>
	</div>
</template>

<script>
	import expandRow from '../comp_user/user_expand'
	import usermain from "../comp_user/user_main"
	import mpage from "../comp_chatter/mpage"
	import pheader from "../comp_chatter/pheader"
	import mheader from "../comp_chatter/mheader"
	import mcontainer from "../comp_chatter/mcontainer"
	import Axios from 'axios'
	import ajax from "../ajax_util"
	import md5 from 'js-md5'
	import inputSearch from '../base/input_search'

	export default {
		components: {
			expandRow,
			usermain,
			mpage,
			mheader,
			mcontainer,
			pheader,
			inputSearch
		},
		data() {
			const validateUser_number = (rule, value, callback) => {
				this.right.user_number_right = -1;
				this.repetition.user_number_repetition = -1;
				let reg = /^[A-Za-z0-9]{6,20}$/;
				if (value === '') {
					callback(new Error('请输入用户账号.'));
				} else if ((!this.add_menu.isupdate) || (this.add_menu.isupdate && this.ifNumber)) {
					console.log("----!!!----------", this.add_menu.isupdate, this.ifNumber);
					if (!reg.test(value)) {
						this.right.user_number_right = 1;
						callback(new Error('用户账号格式不规范!'));
					} else {
						for (var i = 0; i < this.user_numberList.length; i++) {
							if (value === this.user_numberList[i]) {
								this.repetition.user_number_repetition = 1;
								callback(new Error('该用户账号已存在!'));
							}
						}
						callback();
					}
				} else {
					callback();
				}
			};
			return {
				ruleInline: {
					depName: [{
						required: true,
						message: '请输入部门名称.',
						trigger: 'blur'
					}],
					priority: [{
						required: true,
						message: '请输入审批优先级.',
						trigger: 'blur'
					}],
					users: [{
						required: true,
						message: '请选择网络接口人.',
						trigger: 'blur'
					}]
				},
				imageUrl: this.CONFIG.file_url,
				sysmapUrl: this.CONFIG.progress_url + "/business-dep",

				add_menu: {
					id: "",
					show: false,
					isupdate: false,
					updateId: -1,
					depName: "",
					priority: "",

					amUser: {},

					amlabel: "",

				},
				editIndex: "", //编辑的信息下标
				amlabelList: [],

				checkType: "",
				countSys: [],
				total_num: 0,
				userList: [],
				amlabelList: [],
				labelList: [],
				dblabelList: [],
				serverlabelList: [],
				hadooplabelList: [],
				sysNameList: [],
				desList: [],
				sysmapList: [],
				pwdModal: {
					id: -1,
					show: false,
					old_password: "",
					password: ""
				},

				loading: true,
				data: [],
				showdata: [],

				user_numberList: [],
				phoneList: [],
				emailList: [],
				repetition: {
					user_number_repetition: -1,
					phone_repetition: -1,
					email_repetition: -1,
					id_card_repetition: -1
				},
				right: {
					user_number_right: -1,
					password_right: -1
				},
				id_cardList: [],
				roleList: [],

				list01: [],
				list02: [],

				page: 1,
				pageSize: 10,
				search_param: '',
				countUser: [],
				url_id: '0',

				visible: false,
				httpHeader: {
					Authorization: this.$store.state.token
				},

				temp_number: "",
				temp_id_card: "",
				temp_phone: "",
				temp_email: "",
				ifNumber: false,
				ifIdcard: false,
				ifPhone: false,
				ifEmail: false,
				accountList: ["主机账号", "数据库账号", "Hadoop账号", "UAP账号", "PaaS门户账号", "DACP账号", "其他权限内容"]
			}
		},
		computed: {
			columns() {
				let columns = [];
				columns.push({
					title: '序号',
					type: 'index',
					width: 80,
					align: 'center',
					render: (h, params) => {
						return h('span', params.index + (this.page - 1) * this.pageSize + 1);
					}
				});
				columns.push({
					title: '部门名称',
					key: 'depName',
					align: 'center',
					minWidth: 100,
					// maxWidth: 200
				});
				columns.push({
					title: '网络接口人',
					align: 'center',
					slot: 'managerName',
					maxWidth: 140
				});
				columns.push({
					title: '审批优先级',
					align: 'center',
					slot: 'priority',
					maxWidth: 140
				});
				if (this.$hasPerm('sysEdit') || this.$hasPerm('sysMove')) {
					columns.push({
						title: '操作',
						key: 'action',
						width: 160,
						align: 'center',
						render: (h, params) => {
							let button = [];
							if (this.$hasPerm('sysEdit')) {
								button.push(
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.edit(params)
											}
										}
									}, '编辑')
								);
							}
							if (this.$hasPerm('sysMove')) {
								button.push(
									h('Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										on: {
											click: () => {
												this.delete(params.row.id)
											}
										}
									}, '删除')
								);
							}
							return h('div', button);
						}
					});
				}
				return columns;
			}
		},
		mounted() {
			this.get_all_sys();
		},
		methods: {
			selectAccountTypes(data) {
				console.log("======selectAccountTypes====", data, this.add_menu.accountTypes);
			},

			changePage(page) {
				console.log('page', Object.prototype.toString.call(page) == '[object Number]')
				var that = this;
				if (page != undefined && page > 0 && page != null && Object.prototype.toString.call(page) === '[object Number]') {
					that.page = page;
				} else {
					that.page = 1;
				}
				var param = {
					current: that.page,
					pageSize: that.pageSize,
					sysName: this.search_param,
				}
				console.log('param:',param)
				var url = this.sysmapUrl + '/names';
				ajax.get({
					url: url,
					that: that,
					params: param,
					success: function(data) {
						console.log('changePage_data', data)
						that.data = data['records'];
						that.total_num = data['total'];
					}
				})
			},

			changePageSize(pageSize) {
				this.pageSize = pageSize;
				this.url_id = sessionStorage.getItem("url_id")
				if (this.url_id === "0") {
					this.get_all_sys();
				} else if (this.url_id === "1") {
					var param = sessionStorage.getItem("param");
					this.search(param);
				}
			},

			get_all_user() {
				var that = this;
				var url = this.CONFIG.url_know + '/users';
				ajax.get({
					url: url,
					that: that,
					success: function(data) {
						console.log('get_all_user:', data)
						that.userList = []
						for (var i = 0; i < data.length; i++) {
							var j = {};
							j.id = data[i].id;
							j.user_name = data[i].user_name;
							that.userList.push(j);
						}

					}
				})
			},

			get_all_sys() {
				var that = this;
				var url = that.sysmapUrl + "/names";
				ajax.get({
					url: url,
					that: that,
					success: function(data) {
						console.log('get_all_sys:', data)
						//that.data = data
						that.countSys = data
						//that.get_sys_user(data)
						sessionStorage.setItem("url_id", "0");
						that.changePage();
					}
				})
			},

			get_all_role() {
				var that = this;
				var url = this.CONFIG.url_know + '/roles';

				ajax.get({
					url: url,
					that: that,
					success: function(data) {
						that.roleList = [];
						for (var i = 0; i < data.length; i++) {
							var j = {};
							j.id = data[i].id;
							j.role_name = data[i].role_name;
							that.roleList.push(j);
						}
					}
				})
			},

			messageWarningFn(text) {
				this.$Message.warning(text)
				setTimeout(() => {
					this.loading = false
					this.$nextTick(() => {
						this.loading = true
					});
				}, 1);
			},
			cancel(name) {
				this.$refs[name].resetFields();
				this.ifNumber = false;
				this.ifIdcard = false;
				this.ifPhone = false;
				this.ifEmail = false;
			},

			checkamlabel(list) {
				console.log('checkamlabel',list)
				this.amlabelList = list
				list.forEach(item => {
					this.add_menu.amlabel = item.id
					this.add_menu.amUser.user_name = item.user_name
				})
			},

			add_ok() {
				var that = this;
				if (this.add_menu.depName === '') {
					this.messageWarningFn('系统名称不能为空');
					return
				} else if (this.add_menu.amlabel.length == 0 || this.add_menu.amlabel == null || this.add_menu.amlabel ===
					undefined) {
					this.messageWarningFn('网络接口人不能为空!');
					return
				} else if (this.add_menu.priority === '') {
					this.messageWarningFn('审批优先级不能为空');
					return
				} else {
					var url = that.sysmapUrl
					let sys = {
						depName: that.add_menu.depName,
						priority: that.add_menu.priority,
					};
					if (that.add_menu.isupdate) { //说明是修改，不是新增
						console.log('修改：', that.add_menu)
						sys['id'] = that.add_menu.id,
						sys['isUse'] = that.add_menu.isUse
						sys['netManagerId'] = that.add_menu.amlabel

						console.log('sys', sys)
						ajax.put({
							url: url,
							that: that,
							data: sys,
							success: function(data) {
								that.get_all_sys();
								that.$Notice.success({
									title: '成功修改部门'
								});
								that.add_menu.show = false;
							}
						})
					} else { //说明是新增
						console.log('新增：', that.add_menu)
						sys['netManagerId'] = that.add_menu.amlabel
						
						console.log('sys', sys)
						ajax.post({
							url: url,
							that: that,
							data: sys,
							success: function(data) {
								that.get_all_sys();
								that.$Notice.success({
									title: '成功新建系统'
								});
								that.add_menu.show = false;
							}
						})
					}
				}
			},
			add() {
				this.add_menu.isupdate = false;
				this.add_menu.show = true;
				this.add_menu.amlabel = "";
				this.add_menu.depName = "";
				this.add_menu.priority = "";
				this.add_menu.amUser = {};
				this.amlabelList = []

			},
			edit(params) {
				console.log("params---->", params)
				var t = JSON.stringify(params)
				var temp = JSON.parse(t)
				this.add_menu.depName = temp.row.depName
				this.add_menu.priority = temp.row.priority
				this.add_menu.id = temp.row.id
				this.add_menu.isUse = temp.row.isUse
				var use = {
					id:temp.row.netManagerId,
					user_name:temp.row.managerName
				}
				if (temp.row.managerName != undefined && temp.row.managerName != null) {
					this.add_menu.amlabel = temp.row.netManagerId
					this.amlabelList = [use]
				}

				this.add_menu.id = temp.row.id
				this.editIndex = temp.index

				this.add_menu.isupdate = true
				this.add_menu.show = true;
			},
			delete(id) {
				console.log('delete_id', id)
				this.$Modal.confirm({
					title: '确定删除该系统？',
					width: '360',
					onOk: () => {
						this.del(id)
					}
				});
			},
			del(id) {
				sessionStorage.setItem("delete", "true");
				var that = this;
				var url = that.sysmapUrl + '/' + id;
				ajax.put({
					url: url,
					that: that,
					success: function() {
						that.url_id = sessionStorage.getItem("url_id")
						if (that.url_id === "0") {
							that.get_all_sys();
						} else if (that.url_id === "1") {
							var param = sessionStorage.getItem("param");
							that.search(param);
						}

						if (that.data.length === 1 && that.page > 1) {
							var pageTemp = that.page - 1;
						}
						that.changePage(pageTemp);

						that.$Notice.success({
							title: '成功删除系统配置'
						});
					}
				});
			},
			search(param) {
				if (param === '') {} else {
					this.changePage(1)
				}
			},

		}
	}
</script>

<style>
	.demo-upload-list {
		display: inline-block;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 4px;
	}

	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}

	.demo-upload-list-cover {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .6);
	}

	.demo-upload-list:hover .demo-upload-list-cover {
		display: block;
	}

	.demo-upload-list-cover i {
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		margin: 0 2px;
	}
</style>
